<template>
  <div id="search_k">
    <div class="search_parent">
      <div>
        <ul class="tab">
          <li class="zs_login">
            <img src="../../assets/image/search/detail_search_logo.png" alt />
          </li>
          <li
            @click="changeNavBar(index, item)"
            v-for="(item, index) of nav"
            :key="index"
            :class="{ border: navIdx == index }"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
        <div v-if="navSelectData.length > 0" class="sort_public">
          <div v-if="navSelectData[0].jibie">
            <!-- 级别 -->
            <span>级别：</span>
            <span
              v-for="item in navSelectData[0].jibie"
              @click="chooseINX(item.id)"
              :class="{ active: item.id == choose_agree }"
              :key="item.id"
            >{{ item.name }}</span>
          </div>
          <div v-if="navSelectData[0].catrgoryClass" class="sort">
            <!-- 类别 -->
            <span>类别：</span>
            <span
              @click="chooseINX(item.id)"
              v-for="item in navSelectData[0].catrgoryClass"
              :class="{ active: item.id == choose_agree }"
              :key="item.id"
            >{{ item.name }}</span>
          </div>
          <div v-if="navSelectData[0].yearClass" class="sort">
            <!-- 年代 -->
            <span>年代：</span>
            <span v-for="item in navSelectData[0].yearClass" :key="item.id">
              {{
              item.name
              }}
            </span>
          </div>
        </div>
      </div>
      <div>
        <div class="sousuo">
          <input type="text" v-model="content" />
          <div class="sousuo_k" @click="diancang_sousuo()">
            <div>
              <img src="../../assets/image/search/detail_search_big.png" alt />
            </div>

            <span>搜索</span>
          </div>
        </div>
      </div>
    </div>
    <div class="gray_tip">
      <p>共为您找到约{{ totalRow }}篇相关结果</p>
    </div>
    <ul class="content">
      <li
        v-for="(item, index) of currentPageData"
        :key="index"
        @click="todetail(item.id, item.quanjing)"
      >
        <img style="width:335px;height:209px" :src="IP + currentPageData[index].thumb" alt />
        <div class="right_content">
          <p class="content_title">{{ currentPageData[index].name }}</p>
          <span>{{ currentPageData[index].title }}</span>
        </div>
      </li>
    </ul>
    <div id="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :pager-count="5"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="this.totalPage"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      productList: [{}], //所有数据
      totalPage: 0,
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 5, // 每页显示数量
      currentPageData: [],
      totalRow: 0, //长度
      categoryData: [
        {
          jibie: [
            { id: 24, name: "新闻资讯" },
            { id: 25, name: "活动公告" },
            { id: 26, name: "馆务公开" },
            { id: 45, name: "文博动态" },
            { id: 57, name: "大事记" },
          ],
        },
        {
          jibie: [
            { id: 27, name: "基本陈列" },
            { id: 55, name: "临时展览" },
            { id: 56, name: "网上展厅" },
          ],
        },
        {
          // jibie: [
          //   { id: 1, name: "一级" },
          //   { id: 2, name: "二级" },
          //   { id: 3, name: "三级" }
          // ],
          catrgoryClass: [
            { id: "8a7aef0958b37e280158b38d781e0033", name: "瓷器" },
            { id: "8a7aef0958b37e280158b38e61b4003b", name: "玉器" },
            { id: "8a7aef0958b37e280158b39114d30057", name: "书画" },
            { id: "8a7aef0958b37e280158b391666e005b", name: "古籍" },
            { id: "8a7aef0958b37e280158b38ffed8004b", name: "标本" },
            {
              id:
                "8a7aef0958b37e280158b391b34d005f" ||
                "4028c2526174389e016182f203ca002c" ||
                "8a7aef0958b37e280158b38ffed8004b" ||
                "8a7aef0958b37e280158b38fabab0047" ||
                "8a7aef0958b37e280158b390a8290053" ||
                "8a7aef0958b37e280158b38f0331003f" ||
                "8a7aef0958b37e280158b3933a730073",
              name: "其他",
            },
          ],
          // yearClass: [
          //   { id: 1, name: "近代" },
          //   { id: 2, name: "清代" },
          //   { id: 3, name: "明代" },
          //   { id: 4, name: "宋代" }
          // ]
        },
        {
          jibie: [
            { id: 33, name: "活动预告" },
            { id: 34, name: "文博课堂" },
            { id: 35, name: "文博讲座" },
            { id: 36, name: "青少年活动" },
          ],
        },
      ],
      nav: [
        { name: "全部", sort: "seachAll", category: false },
        { name: "咨讯", sort: "seachConsulting", category: true },
        { name: "展览", sort: "seachWxhibition", category: true },
        { name: "馆藏", sort: "antique", category: true },
        { name: "活动", sort: "seachActivity", category: true },
      ],
      searchdetail_content: this.$router.history.current.query.content,
      //标识当前的Nav下标
      navIdx: this.$router.history.current.query.navIdx,
      //标识根据navIdx得到对应的二级菜单
      navSelectData: this.$router.history.current.query.navSelectData,
      name: "",
      sort: this.$router.history.current.query.sort,

      choose_agree: this.$router.history.current.query.choose_agree,

      content: this.$router.history.current.query.content,
    };
  },
  created() {},
  mounted() {
    this.setCurrentPageData(
      this.$router.history.current.query.choose_agree,
      this.$router.history.current.query.content
    );
    // this.diancang_sousuo()
    console.log(this.$router.history.current.query.content);
  },

  methods: {
    //级别选中的id类别切换搜索
    chooseINX(index, item) {
      this.choose_agree = index;
      this.diancang_sousuo();
    },
    //导航的类别
    changeNavBar(idx, item) {
      this.navIdx = idx;
      this.sort = item.sort;

      if (item.category) {
        //说明该导航下面有分类
        this.navSelectData = [];
        let list = this.categoryData[idx - 1];
        this.navSelectData.push(list);
      } else {
        this.navSelectData = [];
      }
      if (this.sort == "seachAll") {
        this.allsearch();
      }
    },
    // 全部的搜搜接口
    allsearch() {
      this.$api
        .get(
          `${this.book}seach/${this.sort}?pageNumber=${this.currentPage}&pageSize=${this.pageSize}&catid=${this.choose_agree}&keyword=${this.content}`
        )

        .then((res) => {
          console.log(this.res, "shoucu");
          // this.totalPage = res.data.paginate.totalPage;
          // this.totalRow = res.data.paginate.totalRow;
          this.currentPageData = res.data;
        });
    },
    setCurrentPageData() {
      if (this.sort == "seachAll") {
        this.allsearch();
        return;
      }
      this.$api
        .get(
          `${this.book}seach/${this.sort}?pageNumber=${this.currentPage}&pageSize=${this.pageSize}&catid=${this.choose_agree}&keyword=${this.content}`
        )

        .then((res) => {
          console.log(this.$route, "detail");
          this.totalPage = res.data.paginate.totalPage;
          this.totalRow = res.data.paginate.totalRow;
          this.currentPageData = res.data.paginate.list;
        });
    },
    handleCurrentChange(val) {
      if (val != this.currentPage) {
        this.currentPage = val;
      }

      // this.page = val;
      this.setCurrentPageData(
        `${this.book}seach/${this.sort}?pageNumber=${this.currentPage}pageSize=${this.pageSize}&catid=${this.choose_agree}&keyword=${this.content}`
      );
    },

    todetail(id, quanjing) {
      if (this.choose_agree == 24) {
        this.$router
          .push({
            path: `/guanwugongkai/consultdetail?id=${id}`,
            query: { orderId: 1 },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == 25) {
        this.$router
          .push({
            path: `/guanwugongkai/huodonggonggaodetail?id=${id}`,
            query: { orderId: 2 },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == 26) {
        this.$router
          .push({
            path: `/guanwugongkai/guanwugongkai2detail?id=${id}`,
            query: { orderId: 3 },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == 45) {
        this.$router
          .push({
            path: `/guanwugongkai/wenbodongtaidetail?id=${id}`,
            query: { orderId: 4 },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == 57) {
        this.$router
          .push({
            path: `/guanwugongkai/dashijidetail?id=${id}`,
            query: { orderId: 5 },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == 55) {
        this.$router
          .push({
            path: `/linzhan/line/year1detail?id=${id}`,
            query: { orderId: 2, bool: true },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == 27) {
        this.$router
          .push({
            path: `/linzhan/basezdetail?id=${id}`,
            query: { orderId: 1, bool: true },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == 56) {
        if (quanjing == "") {
          this.$router
            .push({
              path: `/linzhan/yeardetail?id=${id}`,
              query: { orderId: 3, bool: true },
            })
            .catch((err) => {
              err;
            });
        } else {
          let quanjingData = this.$router.resolve({
            name: "quanjing",
            query: { orderId: 3, bool: true, id: id },
          });
          console.log(quanjingData, 11);
          window.open(quanjing, "_blank");
        }
      } else if (this.choose_agree == 33) {
        this.$router
          .push({
            path: `/huodongyugao/huodongyugao2detail?id=${id}`,
            query: {
              orderId: 1,
            },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == 34) {
        this.$router
          .push({
            path: `/huodongyugao/wenboketangdetail?id=${id}`,
            query: { orderId: 2, id: id },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == 35) {
        this.$router
          .push({
            path: `/huodongyugao/wenbojiangzuodetail?id=${id}`,
            query: {
              orderId: 3,
              balance: this.$store.state.setBalance_jz,
              id: id,
              title: this.$store.state.jz_title,
            },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == 36) {
        this.$router
          .push({
            path: `/huodongyugao/qinshaonianhuodongdetail?id=${id}`,
            query: { orderId: 4, id: id },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == "8a7aef0958b37e280158b38d781e0033") {
        this.$router
          .push({
            path: "/cangpinjiansuo/cangpinjiansuo2/:id",
            query: {
              orderId: 1,

              sort: "8a7aef0958b37e280158b38d781e0033",
            },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == "8a7aef0958b37e280158b38e61b4003b") {
        this.$router
          .push({
            path: "/cangpinjiansuo/cangpinjiansuo2/:id",
            query: {
              orderId: 2,

              sort: "8a7aef0958b37e280158b38e61b4003b",
            },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == "8a7aef0958b37e280158b39114d30057") {
        this.$router
          .push({
            path: "/cangpinjiansuo/cangpinjiansuo2/:id",
            query: {
              orderId: 3,

              sort: "8a7aef0958b37e280158b39114d30057",
            },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == "8a7aef0958b37e280158b391666e005b") {
        this.$router
          .push({
            path: "/cangpinjiansuo/cangpinjiansuo2/:id",
            query: {
              orderId: 4,

              sort: "8a7aef0958b37e280158b391666e005b",
            },
          })
          .catch((err) => {
            err;
          });
      } else if (this.choose_agree == "8a7aef0958b37e280158b38ffed8004b") {
        this.$router
          .push({
            path: "/cangpinjiansuo/cangpinjiansuo2/:id",
            query: {
              orderId: 5,

              sort: "8a7aef0958b37e280158b38ffed8004b",
            },
          })
          .catch((err) => {
            err;
          });
      } else if (
        this.choose_agree == "8a7aef0958b37e280158b391b34d005f" ||
        "4028c2526174389e016182f203ca002c" ||
        "8a7aef0958b37e280158b38ffed8004b" ||
        "8a7aef0958b37e280158b38fabab0047" ||
        "8a7aef0958b37e280158b390a8290053" ||
        "8a7aef0958b37e280158b38f0331003f" ||
        "8a7aef0958b37e280158b3933a730073"
      ) {
        this.$router
          .push({
            path: "/cangpinjiansuo/cangpinjiansuo2/:id",
            query: {
              orderId: 6,

              sort:
                "8a7aef0958b37e280158b391b34d005f" ||
                "4028c2526174389e016182f203ca002c" ||
                "8a7aef0958b37e280158b38ffed8004b" ||
                "8a7aef0958b37e280158b38fabab0047" ||
                "8a7aef0958b37e280158b390a8290053" ||
                "8a7aef0958b37e280158b38f0331003f" ||
                "8a7aef0958b37e280158b3933a730073",
            },
          })
          .catch((err) => {
            err;
          });
      }
    },
    //搜索按钮
    diancang_sousuo() {
      if (this.sort == "seachAll") {
        this.$api
          .get(
            `${this.book}seach/${this.sort}?pageNumber=${this.currentPage}&pageSize=${this.pageSize}&catid=${this.choose_agree}&keyword=${this.content}`
          )

          .then((res) => {
            console.log(res, "sousuo");
            // this.totalPage = res.data.paginate.totalPage;
            // this.totalRow = res.data.paginate.totalRow;
            this.currentPageData = res.data;
          });
        return;
      }
      this.$api
        .get(
          `${this.book}seach/${this.sort}?pageNumber=${this.currentPage}&pageSize=${this.pageSize}&catid=${this.choose_agree}&keyword=${this.content}`
        )
        .then((res) => {
          console.log(res);
          this.totalPage = res.data.paginate.totalPage;
          this.totalRow = res.data.paginate.totalRow;
          this.currentPageData = res.data.paginate.list;
        });
    },
  },
};
</script>
<style scoped>
ul,
li,
p {
  padding: 0px;
  margin: 0px;
}
li {
  list-style: none;
}
.border {
  border-bottom: 3px blue solid;
}
.tab {
  display: flex;
  padding-right: 80px;
  height: 40px;
  margin-bottom: 36px;
  justify-content: space-between;
}
.tab li {
  font-size: 30px;
  height: 45px;
}
.zs_login {
  margin-bottom: 25px;
  align-self: center;
}
.search_parent {
  display: flex;
  flex-direction: column;
  width: 1200px;
  margin: 0px auto;

  margin-top: 35px;
  margin-bottom: 20px;
}
.cangguan > div:first-child,
.cangguan > div:nth-child(2) {
  color: #666666;
  font-size: 24px;
  margin-bottom: 23px;
}
.cangguan > div:first-child {
}
.cangguan > div:nth-child(3) {
  color: #666666;
  font-size: 24px;
  margin-bottom: 36px;
}
.sort span {
  margin-right: 45px;
}
.sousuo input {
  outline: none;
  border: none;
  height: 75px;
  width: 1200px;
  padding-left: 20px;
  box-sizing: border-box;
  background: url("../../assets/image/search/detail_search_K.png") no-repeat
    right;
}
.sousuo {
  position: relative;
}
.sousuo_k {
  position: absolute;
  right: 0px;
  width: 170px;
  height: 74px;
  top: 0px;
  color: white;
  background: url("../../assets/image/search/detail_search_blue.png") no-repeat
    right;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.sousuo_k span {
  font-size: 24px;
}
.gray_tip {
  height: 52px;
  line-height: 52px;
  background: #f4f4f4;
  padding: 0px 24px;
  box-sizing: border-box;
  color: #333333;
  width: 1200px;
  margin: auto;
  margin-bottom: 30px;
}
.content {
  box-sizing: border-box;
  width: 1200px;
  margin: auto;
}
.content li {
  padding: 20px 24px 20px;

  display: flex;
  background: #edf0fc;
  margin-bottom: 30px;
}
.content li img {
  margin-right: 30px;
}
.content_title {
  color: #333333;
  font-size: 24px;
  margin-bottom: 10px;
}
.content li span {
  color: #666666;
  line-height: 1.5;
}
/* fenye */
#page {
  text-align: center;
  margin-top: 65px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 25px;
  height: 25px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
/*  */
.cangguan > div:first-child,
.cangguan > div:nth-child(2) {
  color: #666666;
  font-size: 24px;
  margin-bottom: 23px;
}
.sort_public {
  color: #666666;
  font-size: 24px;
  margin-bottom: 23px;
}
.cangguan > div:nth-child(3) {
  color: #666666;
  font-size: 24px;
  margin-bottom: 36px;
}
.active {
  color: #333333;
}
.sort span,
.sort_public span {
  margin-right: 45px;
}
</style>
